<template>
  <div>
    <div class="local-name">
      {{ routerName }}（{{ routerType }}）
      <el-button
        size="small"
        class="add-button"
        type="success"
        v-if="userGuardList.includes(guard.RouterManage)"
        @click="receiveList"
      >
        <svg-icon icon-class="receive"></svg-icon> 接收组
      </el-button>
      <el-button
        size="small"
        class="add-button"
        type="success"
        v-if="userGuardList.includes(guard.RouterManage)"
        @click="sendList"
      >
        <svg-icon icon-class="push"></svg-icon> 发送端
      </el-button>
    </div>
    <div class="search-form-container">
      <el-form
        inline="true"
        :model="searchForm"
      >
        <el-input
          size="small"
          clearable
          v-model="searchForm.serialNumber"
          placeholder="序列号"
        ></el-input>
        <el-input
          size="small"
          clearable
          v-model="searchForm.name"
          placeholder="设备名称"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          :loading="searchForm.btnLoading"
        >查询</el-button>
      </el-form>
    </div>
  </div>

</template>

<script>
import { Message } from 'element-ui';
import { parseError } from '../../../../utils';
import { getRouterTypeDisplay } from '../../list/servers';
export default {
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      rouerName: '',
      routerType: ''
    };
  },
  mounted() {
    this.routerName = this.$route.query.name;
    this.routerType = this.getRouterTypeDisplay(this.$route.query.type);
  },
  methods: {
    search() {
      this.$emit('search');
    },
    sendList() {
      this.$emit('sendList');
    },
    receiveList() {
      this.$emit('receiveList');
    },
    getRouterTypeDisplay
  }
};
</script>

<style lang="scss" scoped>
div {
  .local-name {
    padding: 10px 0 10px 10px;
    font-size: 24px;
    font-weight: 800;
    .el-button--success {
      float: right;
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-right: 10px;
    }
  }
  .search-form-container {
    background-color: #fff;
    padding: 10px 10px 0 10px;
    margin: 0 10px 0 10px;
    .el-select {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .search-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-input {
      width: 180px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
